<template>
	<view class="personal-center">
		<view class="up-view">
			<view class="custom-navbar">
<!-- 				<view class="nav-left" @click="goBack">
					<global-arrow direction="left" :size="29" color="#fff"></global-arrow>
				</view>
				<view class="nav-title">
					<text>个人中心</text>
				</view>
				<view class="nav-right">

				</view> -->
			</view>
			<!-- 头部信息区域（动态数据） -->
			<view class="header">
				<!-- 外层容器：控制外环 -->
				<view class="avatar-wrapper"  @click="goUserInfo">
					<!-- 头像：优先显示用户头像，无则显示默认头像 -->
					<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill">
					</image>
				</view>

				<view class="userInfo">
					<!-- 姓名：加载中显示"加载中..."，获取失败显示"未登录" -->
					<text class="name">{{ userInfo.name || (isLoading ? '加载中...' : '未登录') }}</text>
					<!-- 电话：显示格式化后的手机号（如186****4789） -->
					<text class="phone">{{ userInfo.phone }}</text>
				</view>
			</view>
		</view>



		<!-- 我的优惠券 -->
		<view class="coupon" @click="goCoupon">
			<view class="coupon-left">
				<!-- 自定义图标 -->
				<image class="custom-icon-1" src="/static/icons/彩色-优惠券@2x.png" mode="widthFix" lazy-load></image>
				<text>我的优惠券</text>
			</view>
			<view class="coupon-right">
				<text>3张</text>
				<uni-icons type="right" size="18"></uni-icons>
			</view>
		</view>

		<view class="order-section">
		    <view class="order-header">
		      <text class="order-title">我的订单</text>
			  <view class="coupon-right">
				  <text class="all-order" @click="goAllOrder">全部订单</text>
				  <uni-icons type="right" size="14"></uni-icons>
			  </view>
		      
		    </view>
		    <view class="order-tabs">
		      <view class="tab-item img-1" @click="goTab('pendingPay')">待支付</view>
		      <view class="tab-item img-2" @click="goTab('pendingUse')">待使用</view>
		      <view class="tab-item img-3" @click="goTab('pendingComment')">待评价</view>
		    </view>
		  </view>

		<!-- 我的服务 -->
		<view class="service-title">我的服务</view>
		<view class="service-list">
			<view class="service-item" @click="goCouponCenter">
				<!-- 自定义图标 -->
				<image class="custom-icon" src="/static/icons/组 9@2x(3).png" mode="widthFix" lazy-load></image>
				<text>领券中心</text>
			</view>
			<view class="service-item" @click="goInvite">
				<!-- 自定义图标 -->
				<image class="custom-icon" src="/static/icons/组 9@2x(4).png" mode="widthFix" lazy-load></image>
				<text>邀请好友</text>
			</view>
			<view class="service-item" @click="goMyCar">
				<!-- 自定义图标 -->
				<image class="custom-icon" src="/static/icons/组 9@2x(5).png" mode="widthFix" lazy-load></image>
				<text>我的车辆</text>
			</view>
			<view class="service-item" @click="goConsumeRecord">
				<!-- 自定义图标 -->
				<image class="custom-icon" src="/static/icons/组 9@2x(6).png" mode="widthFix" lazy-load></image>
				<text>消费记录</text>
			</view>
			<view class="service-item" @click="goMyRepair">
				<!-- 自定义图标 -->
				<image class="custom-icon" src="/static/icons/组 9@2x(7).png" mode="widthFix" lazy-load></image>
				<text>我的维修</text>
			</view>
			<view class="service-item" @click="goFeedback">
				<!-- 自定义图标 -->
				<image class="custom-icon" src="/static/icons/组 9@2x(8).png" mode="widthFix" lazy-load></image>
				<text>意见反馈</text>
			</view>
			<view class="service-item" @click="goAddress">
				<!-- 自定义图标 -->
				<image class="custom-icon" src="/static/icons/组 9@2x(9).png" mode="widthFix" lazy-load></image>
				<text>收货地址</text>
			</view>

		</view>

		<!-- 退出登录 -->
		<button class="logout-btn" type="default" @click="logout">退出登录</button>
	</view>
	<!-- 自定义 TabBar -->
	<CustomTabbar />
</template>
<script>
	import CustomTabbar from '@/uni_modules/components/custom-tab-bar/custom-tab-bar.vue';
	import {get,post,put,del} from "@/utils/request.js"
	export default {
		components: {
			CustomTabbar 
		},
		data() {
			return {
				// 用户信息对象（初始为空）
				userInfo: {
					avatar: '', // 头像URL
					name: '', // 姓名
					phone: '' // 电话
				},
				isLoading: false // 加载状态标记
			};
		},
		onLoad() {
			// 页面加载时获取用户信息
			this.getUserInfo();
		},
		methods: {
			// 获取用户信息（模拟接口请求）
			async getUserInfo() {
				this.isLoading = true; // 开始加载
				try {
					// 实际项目中替换为真实接口
					const res = await this.mockUserInfoApi();

					// 接口成功：更新用户信息
					if (res.code === 200) {
						this.userInfo = res.data;
					} else {
						// 接口返回错误信息
						uni.showToast({
							title: res.msg || '获取信息失败',
							icon: 'none'
						});
					}
				} catch (err) {
					// 网络错误等异常
					console.error('获取用户信息失败：', err);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				} finally {
					this.isLoading = false; // 结束加载
				}
			},

			// 模拟接口（实际项目中删除，替换为真实接口调用）
			mockUserInfoApi() {
				return new Promise(resolve => {
					// 模拟网络延迟
					setTimeout(() => {
						resolve({
							code: 200,
							msg: 'success',
							data: {
								avatar: '/static/images/头3.jpg', // 实际可能是网络URL
								name: '张先生',
								phone: '18602564789'
							}
						});

						// 测试失败场景（取消注释即可）
						// resolve({ code: 500, msg: '登录已过期' });
					}, 800);
				});
			},

			goBack() {
				uni.navigateBack();
			},
			handlePlus() {
				// 处理“+”按钮逻辑
				console.log('点击了+按钮');
			},
			goCoupon() {
				uni.navigateTo({
					url: '/pages/coupon/coupon'
				});
			},
			goUserInfo(){
				uni.navigateTo({
					url: '/my/pages/userInfo/userInfo'
				});
			},
			goOrder(type) {
				uni.navigateTo({
					url: `/pages/order/order?type=${type}`
				});
			},
			goAllOrder() {
				uni.navigateTo({
					url: '/my/pages/myOrders/myOrders'
				});
			},
			goTab(type) {
			      // 根据不同类型跳转到对应订单列表页
			      uni.navigateTo({ url: `/pages/orderList/orderList?type=${type}` });
			    },
			goCouponCenter() {
				uni.navigateTo({
					url: '/pages/couponCenter/couponCenter'
				});
			},
			goInvite() {
				uni.navigateTo({
					url: '/pages/invite/invite'
				});
			},
			goMyCar() {
				uni.navigateTo({
					url: '/pages/myCar/myCar'
				});
			},
			goConsumeRecord() {
				uni.navigateTo({
					url: '/pages/consumeRecord/consumeRecord'
				});
			},
			goMyRepair() {
				uni.navigateTo({
					url: '/my/pages/myOrdersRepair/myOrdersRepair'
				});
			},
			goFeedback() {
				uni.navigateTo({
					url: '/pages/feedback/feedback'
				});
			},
			goAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				});
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 执行退出登录逻辑
							console.log('退出登录');
						}
						uni.removeStorageSync('token')
						del('/auth/logout').then(res=>{
							console.log(res);
							uni.reLaunch({
								url:'/pages/login/login'
							})
						})
						
					}
				});
			},
			goHome() {
				uni.switchTab({
					url: '/pages/home/home'
				});
			},
			goMine() {
				uni.switchTab({
					url: '/pages/mine/mine'
				});
			}
		}
	};
</script>

<style scoped>
	.page {
		padding: 0 10rpx;
		background-color: #F8F8F8;
	}

	.up-view {
		padding: 0 20rpx;
		/* background: linear-gradient(to bottom, #3788FF, #0963E7); */
		color: #fff;
		padding-bottom: 70rpx;
		/* 1. 基础渐变背景（作为底层） */
		background: linear-gradient(to bottom, #3788FF, #0963E7);

		/* 2. 添加背景图（叠加在渐变上） */
		background-image: url('/static/icons/组 8.png');
		/* 背景图路径 */

		/* 3. 背景图属性设置 */
		background-repeat: no-repeat;
		/* 不重复平铺 */
		background-size: cover;
		/* 覆盖整个容器（可能裁剪） */
		/* 可选：background-size: contain; 完整显示图片（可能留空白） */

		background-position: center center;
		/* 图片居中显示 */
		background-attachment: scroll;
		/* 随内容滚动（默认值） */

		/* 4. 可选：调整背景图透明度（通过多重背景叠加叠加实现） */
		background-image:
			linear-gradient(to bottom, #3788FF, #0963E7),
			/* 渐变层 */
			url('/static/icons/组 8.png');
		/* 图片层（在渐变上方） */
		background-blend-mode: overlay;
		/* 混合模式（可选） */
	}

	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 10rpx;
		font-weight: 300;
		box-sizing: border-box;
	}

	.nav-title {
		margin-right: 17rpx;
	}


	/* 样式保持不变，仅展示关键部分 */
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 0;
		color: #fff;
	}

	/* 外环容器 */
	.avatar-wrapper {
		width: 140rpx;
		/* 比头像宽 20rpx（外环宽度 10rpx * 2） */
		height: 140rpx;
		border-radius: 50%;
		/* 圆形 */
		background: rgba(227, 227, 227, 0.1);
		/* 外环颜色 */
		padding: 10rpx;
		/* 外环宽度（内边距撑开外环） */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 头像本身 */
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 7rpx solid #d4e3ea;
	}

	.userInfo {
		margin-top: 24rpx;
	}

	.name {
		font-size: 30rpx;
		margin-bottom: 8rpx;
		margin-right: 27rpx;
		font-weight: 500;
	}

	.phone {
		font-size: 26rpx;
		opacity: 0.9;
		/* 电话稍暗一点，突出姓名 */
	}

	.coupon {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		margin: 0 20rpx;
		margin-top: -60rpx;
		border-radius: 10rpx;
	}

	.coupon-left,
	.coupon-right {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}

	.coupon-left text,
	.coupon-right text {
		margin-left: 10rpx;
		font-size: 27rpx
	}

	.order-section {
	  background-color: #fff;
	  padding: 20rpx;
	  margin: 10rpx;
	  border-radius: 10rpx;
	}
	
	.order-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20rpx;
	  padding-right: 14rpx;
	}
	
	.order-title {
	  font-size: 28rpx;
	  font-weight: bold;
	}
	
	.all-order {
	  padding: 15rpx 0;
	  color: #999;
	  font-size: 20rpx;
	}

	.order-tabs {
		display: flex;
		padding: 10rpx 20rpx;
		background-color: #fff;
		margin: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 15rpx;
		background-color: #E6F7FF;
		color: #1890FF;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}

	.tab-item:last-child {
		margin-right: 0;
	}


	.service-title {
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		background-color: #fff;
		margin: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.service-list {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin: 10rpx 20rpx;
	}

	.service-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.service-item text {
		margin-top: 10rpx;
		font-size: 24rpx;
	}
	/* 自定义图标样式 */
	.custom-icon {
	  width: 60rpx;  /* 图标宽度（对应原size="24"的视觉大小） */
	  height: 50rpx; /* 高度自适应 */
	  /* 如需调整颜色，可使用滤镜（仅对单色图标有效） */
	  /* filter: drop-shadow(0 0 0 #4CD964); */
	}
	.custom-icon-1 {
	  width: 40rpx;  /* 图标宽度（对应原size="24"的视觉大小） */
	  margin-right: 10rpx;
	   /* 高度自适应 */
	  /* 如需调整颜色，可使用滤镜（仅对单色图标有效） */
	  /* filter: drop-shadow(0 0 0 #4CD964); */
	}
	

	.logout-btn {
		margin: 70rpx 100rpx 200rpx;
		border-radius: 100rpx;
		font-size: 27rpx;
		background-color: #d3d3d3;
		color: #fff;
	}

	.bottom-tab {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 10rpx 0;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		padding: 30rpx 0;
		color: white;
		/* 3. 背景图属性设置 */
		background-repeat: no-repeat;
		/* 不重复平铺 */
		background-size: cover;
		/* 覆盖整个容器（可能裁剪） */
		/* 可选：background-size: contain; 完整显示图片（可能留空白） */
		
		background-position: center center;
	}
	.tab-item.img-1{
		background-image: url('/static/icons/组 9@2x(0).png');
	}
	.tab-item.img-2{
		background-image: url('/static/icons/组 9@2x(1).png');
	}
	.tab-item.img-3{
		background-image: url('/static/icons/组 9@2x(2).png');
	}


</style>